import React, { Component } from 'react'
import PropTypes from 'prop-types';
import './index.css'
export default class Item extends Component {
  static propTypes = {
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired
  }
  state = {
    mouseEnter: false
  }
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouseEnter: flag })
    }
  }
  inputChange = (id) => {
    return (event) => {
      const { updateTodo } = this.props
      updateTodo(id, event.target.checked)
    }
  }
  render() {
    const { name, done, id,deleteTodo } = this.props
    const { mouseEnter } = this.state
    return (
      <ul>
        <li className="li active" onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} style={{ background: mouseEnter ? '#ddd' : '' }}>
          <label>
            <input type="checkbox" checked={done} onChange={this.inputChange(id)} />
            <span>{name}</span>
          </label>
          <button onClick={() => {deleteTodo(id)}} className="btn" style={{ display: mouseEnter ? 'inline-block' : 'none' }}>删除</button>
        </li>
      </ul>
    )
  }
}
